<template>
  <div
    class="template-preview-box"
    :style="boxSize"
  >
      <animation
        :config="config"
        ref="animation"
        v-if="config !== null"
      />
      <el-empty description="模板配置错误" v-if="config === null"></el-empty>
  </div>
</template>

<script>
import Animation from '../../animation/index.vue';
export default {
    components: {
        Animation,
    },
    props: ['template'],
    computed: {
        config() {
            const { template } = this;
            if (template.config) {
                return JSON.parse(template.config);
            }
            return null;
        },
        boxSize() {
            if (this.config) {
                const { width, height } = this.config;
                return {
                    width: `${width}px`,
                    height: `${height}px`,
                };
            }
            return {
                width: '480px',
                height: '280px',
            };
        }
    },
    mounted() {
        console.log('animation===>', this.$refs.animation);
        if (this.$refs.animation) {
            this.$refs.animation.seek(1000);
        }
        
    },
    methods: {
        start() {
            this.$refs.animation.start();
        }
    }
}
</script>

<style lang="less" scoped>
.template-preview-box {
    display: inline-block;
    transform: scale(0.7);
    transform-origin: 0 0;
}
</style>